/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-06-29 15:46:12
 * @LastEditTime: 2023-10-09 14:46:49
 */
import './index.less'

interface BoxCardProp {
    title?: any
    direction?: 'left' | 'center' | 'right' | undefined
    icon?: string
    iconShow?: string
    extra?: React.ReactNode
    children?: React.ReactNode
    style?: any
    headStyle?: any
    contentStyle?: any
    contentClassName?: any
}

const BoxCard: React.FC<BoxCardProp> = (props) => {
    const {
        title,
        title1,
        title2,
        extra,
        children,
        direction = 'center',
        contentStyle = {},
        headStyle = {},
        style = {},
        contentClassName = ""
    } = props
    return (
        <>
            <div className='box-card' style={style}>
                <div
                    className={`box-card-head ${direction == 'left' || direction == 'right' ? `box-card-head--decorate-${direction}` : 'box-card-head--decorate'}`}
                    style={headStyle}>
                    <div className='box-card-head-wrapper'>
                        <div className='box-card-head-title' >{title}<span style={{color:'red'}}>{title1}</span>{title2}</div>
                        {extra ? <div className='box-card-head-extra'>{extra}</div> : null}
                    </div>
                </div>
                <div className={`box-card-content ${contentClassName}`} style={contentStyle}>
                    {children}
                </div>
            </div>
        </>
    )
}
export default BoxCard